<template>
  <div class="notice-dialog">
    <el-dialog :title="titleFlag ? '修改公告': '添加公告'" :visible.sync="show"
    :before-close="close">
      <el-form :model="addForm" ref="addForm">
        <el-form-item label="公告标题">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="公告图片" prop="picture">
          <el-upload
            v-model="addForm.picture"
            class="avatar-uploader"
            action="http://estate.eshareedu.cn/estate/upload/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
          <el-form-item label="公告内容">
            <UEditor :content="addForm.content" @ueChange="ueChange" />
        </el-form-item>
          <el-form-item label="状态" prop="state">
          <el-radio-group v-model="addForm.state">
            <el-radio label="1">开始</el-radio>
            <el-radio label="0">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
              <el-form-item label="类型" prop="type">
          <el-select v-model="addForm.type" placeholder="请选择">
            <el-option label="服务协议" value="1"></el-option>
            <el-option label="咨询" value="2"></el-option>
            <el-option label="小区公告" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addNotice"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from './../api/notice'
import UEditor from "./../components/common/UEditor.vue";
export default {
  components: { UEditor},
    props: {
        titleFlag: {
            type: Boolean,
            default: false
        },
        show: {
            type: Boolean,
            default: false
        },
        updateData: {
            type: Object,
            default: () => {}
        }
    },
    data () {
        return {
          imageUrl:'',
            addForm: {
                id: 0,
                title: "",
                picture: "",
                edituser: "",
                state: 1,
                type: 1,
                hits: 0,
                content: "",
                addtime: "2021-10-25 09:56:47",
                copyContent: '默认文本',
            }
        }
    },
    methods: {
        close() {
            this.$emit('close', false)
        },
        // 富文本编辑器
      ueChange(data) {
        this.addForm.content = data;
      },
       async addNotice() {
            console.log('需要更新的数据', this.addForm)
            let msg = !this.addForm.id ? '添加成功' : '修改成功' 
            const {errCode } = await http.noticeAdd(this.addForm)
            if(errCode === 10000) {
                this.$message.success(msg)
                // 关闭弹出层 渲染公告列表
                this.$emit('close', false, undefined, 1)
                // 表单重置
                this.$refs.addForm.resetFields()
            }
        },
              // 上传图片
        handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    },
    watch: {
        updateData (newVal) {
            this.addForm = newVal
        }
    }
};
</script>

<style lang="less" scoped>
</style>